<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发布进度</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui/aui.css" />
    <style>
        body {
            background: #fff;
        }

        .textarea {
            width: 100%;
            height: 6rem;
            border: 1px solid #E1E1E1;
            padding: 0.2rem;
        }

        .up_image_box {
            display: flex;
        }

        .up_image {
            width: 33%;
            height: 29vw;
            border: 1px solid #E1E1E1;
            margin-right: 1rem;
            margin-bottom: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn {
            background: #0689FB;
            width: 70%;
            height: 2rem;
            text-align: center;
            line-height: 2rem;
            color: #fff;
            margin: 3rem auto 0;
            border-radius: 0.2rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="aui-content-padded">
            <div style="margin:1rem 0 0.5rem 0;">描述进度</div>
            <textarea v-model="info.summary" class="textarea" placeholder="请描述该服务项目目前的进度情况"></textarea>

            <div style="margin:1rem 0 0.5rem 0;">上传图片<small style="font-size:0.5rem;color:#B7B7B7;">(图片大小不要超过1MB)</small></div>
            <div class="up_image_box">
                <div class="up_image" @click="addImg($event, 0)">
                    <img src="../../../image/icon/shangchuan1.png" alt="">
                </div>
                <div class="up_image" @click="addImg($event, 1)">
                    <img src="../../../image/icon/shangchuan1.png" alt="">
                </div>
                <div class="up_image" @click="addImg($event, 2)">
                    <img src="../../../image/icon/shangchuan1.png" alt="">
                </div>
            </div>

            <div class="btn" @click="submit()">立即提交</div>
        </div>
    </div>
</body>
<script src="../../../script/api.js" charset="utf-8"></script>
<script src="../../../script/aui/aui-tab.js" charset="utf-8"></script>
<script src="../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();
        vm.init();

    }
    var vm = new Vue({
        el: "#app",
        data: {
            orderInfo: {},
            info: {
                summary: '',
                plan_image_array: []
            }
        },
        methods: {
            init() {
                this.orderInfo = api.pageParam
            },
            submit() {
                var data = {
                    order_id: this.orderInfo.order_id,
                    work_id: this.orderInfo.work_id,
                    work_user_id: this.orderInfo.work_user_id,
                    accept_user_id: this.orderInfo.accept_user_id,
                    summary: this.info.summary,
                    plan_image_array: this.info.plan_image_array,
                };
                if (!is_define(data.summary)) {
                    $toast('请描述进度');
                    return;
                } else if (data.plan_image_array.length === 0) {
                    $toast('请上传图片');
                    return;
                }

                _ajax(Config.api.AcceptUserReleasePlan, data, function(ret) {
                    if (ret.code === 200) {
                        $toast("发布成功");
                        setTimeout(function() {
                            close_w();
                        }, 1000);
                    }
                });
            },
            addImg(event, i) {
                var that = this;
                var obj = $(event.currentTarget);
                imageUpload(Config.api.ImageUploadcommon, function(ret) {
                    if (ret.code === 200) {
                        obj.find('img').attr('src', ret.data.imgurl).css({'width': '100%', 'height': '100%'});
                        that.info.plan_image_array[i] = ret.data.imgurl;
                    } else {
                        $toast(ret.msgs);
                    }
                });
            }
        }
    });
</script>

</html>
